<template>
  <el-tabs v-model="tabsValue" tab-position="left">
    <el-tab-pane
      v-for="item in functions"
      :key="item.id"
      :label="item.name"
      :name="item.id"
      style="height: 300px"
    >
      {{ item.content }}

      <el-row>
        <el-col :span="14">
          <el-form :ref="`form${item.id}`" :model="form" :rules="rules">

            <el-row style="width: 840px">

              <!-- 脚本 -->
              <json-editor
                style="height: 400px; overflow: auto"
                v-model="form[item.id]"
                :mode="editorOptions.mode"
                :lang="editorOptions.lang"
              />


              <div style="float: right;margin-top: 20px">
                <el-button type="primary" @click="submitForm(item)">执行</el-button>
                <el-button @click="reset(item)">清空</el-button>
              </div>
            </el-row>

          </el-form>
        </el-col>

        <el-col :span="10" style="padding-left: 100px;padding-right: 80px">
          <el-form ref="result" :model="result">
            <template>
              <span>执行结果：</span>
              <p></p>
              <el-input
                style="margin-top: 20px"
                v-model="result.data"
                :autosize="{ minRows: 9, maxRows: 9}"
                type="textarea"
                readonly/>

            </template>
          </el-form>
        </el-col>

      </el-row>


    </el-tab-pane>
  </el-tabs>
</template>

<script>
import JsonEditor from '@/components/JsonEditor'
import {invokedFunction} from '@/api/iot/device'

export default {
  name: 'Advanced',
  components: {
    JsonEditor
  },
  data() {
    return {
      //功能列表
      functions: [],
      tabsValue: undefined,
      deviceId: undefined,
      tableData: [],
      // 表单参数
      form: {},
      data: '',
      result: {
        data: ''
      },
      // 表单校验
      rules: {},
      jsonData: [],
      // 代码编辑器配置
      editorOptions: {
        mode: 'tree', // 默认模式 tree,code,form,text,view
        lang: 'zh' // zh(中文),en(英文)
      }
    }
  },
  methods: {
    handleAdvancedModel(deviceId, functions) {
      this.deviceId = deviceId
      this.functions = functions
      this.tabsValue = functions[0] && functions[0].id
      this.functions.forEach(item => {
        this.form[item.id] = {}
        item.inputs.forEach(data => {
          this.form[item.id][data.id] = "";

        })
      })
    },
    // 表单重置
    reset(item) {
      this.form = {}
      this.$refs[`form${item.id}`][0].resetFields()
    },
    submitForm(item) {
      this.$refs[`form${item.id}`][0].validate(valid => {
        if (valid) {

          invokedFunction(this.deviceId, item.id, this.form[item.id]).then(response => {
            if (typeof (response.data) === "object") {
              this.$set(this.result, 'data', JSON.stringify(response.data, null, 2));
            } else {
              this.$set(this.result, 'data', response.data);
            }

          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>

::v-deep .jsoneditor-vue {
  height: 100%;
}
</style>
